<style lang="less">
    @import "../../../styles/common.less";
</style>
<template>
    <div class="search">
        <Card title="帮助中心">
            <!--<Row class="operation">
                <Button @click="add" type="primary" icon="md-add">添加</Button>
                <Dropdown @on-click="handleDropdown">
                    <Button>更多操作
                        <Icon type="md-arrow-dropdown"/>
                    </Button>
                    <DropdownMenu slot="list">
                        <DropdownItem name="delDcit">删除</DropdownItem>
                        <DropdownItem name="refreshDcit">刷新</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
            </Row>-->
            <Row type="flex" justify="start" class="code-row-bg">
                <Col span="4">
                    <div class="tree-bar">
                        <Tree ref="tree" :data="treeData"  @on-select-change="selectTree"></Tree>
                    </div>
                    <Spin size="large" fix v-if="loading"></Spin>
                </Col>
                <Col span="20">
                    <Form ref="form" :model="form" :label-width="85" :rules="formValidate">
                        <FormItem label="标题" prop="htmlTitle">
                            <Input v-model="form.htmlTitle"/>
                        </FormItem>
                        <FormItem label="内容" prop="htmlContent">
                            <div ref="editor"></div>
                        </FormItem>
                        <Form-item label class="br">
                            <Button @click="editHTML" icon="ios-create-outline">编辑HTML代码</Button>
                            <Button @click="fullscreenModal=true" icon="md-eye">预览</Button>
                        </Form-item>
                        <Form-item>
                            <Button @click="submitEdit" :loading="submitLoading" type="primary" :disabled="saveBtn" icon="ios-create-outline">{{btnText}}</Button>
                            <Button v-if="delStatus" @click="remove" icon="md-trash" :disabled="delBtn">删除</Button>
                            <Button @click="handleReset">重置</Button>
                        </Form-item>
                    </Form>
                </Col>
            </Row>
            <!-- html编辑 -->
            <Modal title="编辑html代码" v-model="showHTMLModal" :mask-closable="false" :width="900" :fullscreen="full">
                <Input v-if="!full" v-model="dataEdit" :autosize="true" type="textarea" style="max-height:60vh;overflow:auto"/>
                <Input v-if="full" v-model="dataEdit" :autosize="true" type="textarea"/>
                <div slot="footer">
                    <Button @click="full=!full" icon="md-expand">全屏开/关</Button>
                    <Button @click="editHTMLOk" type="primary" icon="md-checkmark-circle-outline">确定保存</Button>
                </div>
            </Modal>
            <Modal title="预览" v-model="fullscreenModal" fullscreen>
                <div v-html="form.htmlContent">{{form.htmlContent}}</div>
                <div slot="footer">
                    <Button @click="fullscreenModal=false">关闭</Button>
                </div>
            </Modal>
        </Card>
    </div>
</template>

<script>
    import {delHtml, getHtml, updateHtml, selectHtml, addHtml, uploadFile} from "@/api/index";
    import E from "wangeditor";
    // 表情包配置 自定义表情可在该js文件中统一修改
    import {sina} from "@/libs/emoji";

    let editor = null;
    var xss = require("xss");
    export default {
        name: "html-manage",
        data() {
            return {
                loading: false, // 树加载状态
                loadingEdit: false, // 编辑上级树加载状态
                modalVisible: false, // 添加显示
                selectList: [], // 多选数据
                selectCount: 0, // 多选计数
                saveBtn: true,
                delBtn:true,
                showParent: false, // 显示上级标识
                modalTitle: "", // 添加标题
                type:0,
                editTitle: "", // 编辑节点名称
                searchKey: "", // 搜索树
                btnText:"添加",
                delStatus: false,
                form: {
                    // 编辑对象初始化数据
                    id: "",
                    parentId:0,
                    htmlContent: "",
                    htmlTitle: "",
                    sortOrder: 0,
                    status: 0
                },
                formAdd: {
                    // 添加对象初始化数据
                },
                formValidate: {
                    // 表单验证规则
                    htmlTitle: [{required: true, message: "名称不能为空", trigger: "blur"}]
                },
                submitLoading: false,
                data: [],
                treeData: [], // 树数据
                dataEdit: "", // 编辑数据
                showHTMLModal: false, // 显示html
                full: false, // html全屏开关
                fullscreenModal: false// 显示全屏预览
            };
        },
        methods: {
            init() {
                // 初始化一级节点
                this.getTreeData();
                this.initEditor();
            },
            initEditor() {
                let that = this;
                editor = new E(this.$refs.editor);
                editor.customConfig.onchange = html => {
                    this.form.htmlContent =html;
                };
                editor.customConfig.uploadImgServer = uploadFile;
                editor.customConfig.uploadImgHeaders = {
                    Authorization: that.getStore("accessToken")
                };
                editor.customConfig.uploadFileName = "file";
                editor.customConfig.uploadImgHooks = {
                    before: function (xhr, editor, files) {
                    },
                    success: function (xhr, editor, result) {
                    },
                    fail: function (xhr, editor, result) {
                        that.$Message.error("上传图片失败");
                    },
                    error: function (xhr, editor) {
                        that.$Message.error("上传图片出错");
                    },
                    timeout: function (xhr, editor) {
                        that.$Message.error("上传图片超时");
                    },
                    customInsert: function (insertImg, result, editor) {
                        if (result.status === true) {
                            let url = result.data.fileUrl;
                            insertImg(url);
                            that.$Message.success("上传图片成功");
                        } else {
                            that.$Message.error(result.info);
                        }
                    }
                };
                editor.customConfig.fontNames = ["微软雅黑", "宋体", "黑体", "Arial"];
                editor.customConfig.emotions = [
                    {
                        title: "新浪",
                        type: "image",
                        content: sina
                    }
                ];
                editor.create();
            },
            editHTML() {
                this.dataEdit = this.form.htmlContent;
                this.showHTMLModal = true;
            },
            editHTMLOk() {
                editor.txt.html(this.dataEdit);
                this.form.htmlContent =xss(this.dataEdit);
                this.showHTMLModal = false;
            },
            //加载一级课程类型
            getTreeData() {
                this.treeLoading = true;
                selectHtml({parentId: 0}).then(res => {
                    this.treeLoading = false;
                    if (res.status === true) {
                        this.treeData = res.data;
                    }
                });
            },
            selectTree(v) {
                if (v.length > 0) {
                    let str = JSON.stringify(v[0]);
                    let data = JSON.parse(str);
                    if (data.parentId != "0") {
                        this.type=1;
                        getHtml(data.id).then(res => {
                            this.treeLoading = false;
                            if (res.status === true) {
                                editor.txt.html(res.data.htmlContent);
                                this.form=res.data;
                                if(this.form.parentId === '2'){
                                    this.delStatus = true;
                                }else{
                                    this.delStatus = false;
                                }
                                this.form.htmlTitle = res.data.htmlTitle;
                                this.btnText="保存并修改";
                                this.saveBtn = false;
                                this.delBtn=false;
                            }
                        });
                    }else{
                        this.type=0;
                        delete this.form.id;
                        this.delBtn=true;
                        editor.txt.html("");
                        this.saveBtn = false;
                        this.form.parentId=data.id;
                        this.btnText="添加";
                    }

                } else {
                    this.cancelEdit();
                }
            },
            cancelEdit() {
                let data = this.$refs.tree.getSelectedNodes()[0];
                if (data) {
                    data.selected = false;
                }
                this.isMenu = false;
                this.isButton = false;
                this.$refs.form.resetFields();
                delete this.form.id;
                this.editTitle = "";
            },
            cancelAdd() {
                this.modalVisible = false;
            },
            handleReset() {
                this.$refs.form.resetFields();
                this.form.status = 0;
            },
            submitEdit() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        if(this.type==1) {
                            if (!this.form.id) {
                                this.$Message.warning("请先点击选择要修改的节点");
                                return;
                            }
                        }
                        this.submitLoading = true;
                        updateHtml(this.form).then(res => {
                            this.submitLoading = false;
                            if (res.status === true) {
                                this.$Message.success(res.info);
                                if(this.type==0){
                                    this.getTreeData();
                                }
                            }
                        });
                    }
                });
            },
            submitAdd() {
                this.$refs.formAdd.validate(valid => {
                    if (valid) {
                        this.submitLoading = true;
                        if (this.formAdd.sortOrder === null) {
                            this.formAdd.sortOrder = "";
                        }
                        if (this.formAdd.buttonType === null) {
                            this.formAdd.buttonType = "";
                        }
                        this.submitLoading = false;
                        this.$Message.success("添加成功");
                        this.modalVisible = false;
                    }
                });
            },
            add() {
                if (this.form.id == "" || this.form.id == null) {
                    this.$Message.warning("请先点击选择一个节点");
                    return;
                }
                this.modalTitle = "添加子节点";
                this.showParent = true;
                this.formAdd = {
                    parentId: this.form.id,
                    sortOrder: 0,
                    status: 0
                };
                this.modalVisible = true;
            },
            addRoot() {
                this.modalTitle = "添加一级节点";
                this.showParent = false;
                this.formAdd = {
                    parentId: 0,
                    sortOrder: 0,
                    status: 0
                };
                this.modalVisible = true;
            },
            changeSelect(v) {
                this.selectCount = v.length;
                this.selectList = v;
            },
            remove() {
                this.$Modal.confirm({
                    title: "确认删除",
                    content: "您确认要删除?",
                    onOk: () => {
                        var params={
                            id:this.form.id
                        }
                        delHtml(params).then(res => {
                            if (res.status === true) {
                                this.$Message.success("删除成功");
                                this.$refs.form.resetFields();
                                editor.txt.html("");
                                this.getTreeData();
                            }
                        });
                    }

                });
            }
        },
        mounted() {
            this.init();
        }
    };
</script>